<html>
<head>
  <title>Pyscript Demo</title>
  <script src="pyscript.min.js"></script>
</head>

<body>
  <h1>Simple Pyscript Demo</h1>

  <h3>The pyscript code being run:</h3>
  <pre id="code"></pre>
  
  <p>
    <h3>Result:</h3>
    <em>string</em>: <span id="string"></span><br/>
    <em>count</em>: <span id="count"></span><br/>
    <em>triangle</em>: <span id="triangle"></span><br/>
  </p>
  
<script id="input" type="text/pyscript">
  var el = document.getElementById("string")
  for var i=0; i<5; i++: el.innerHTML += "hello! "
  
  var count = 0
  for var i=0; i<5; i++:
    count += 1
    if count==2:
      count *= 5
  
  document.getElementById("count").innerHTML = count;    
  
  function triangle(a,b):
    function sqroot(x): return Math.pow(x,.5)
    return sqroot( a*a + b*b )
  
  document.getElementById("triangle").innerHTML = triangle(3,4);
</script>
<script>
  var input = document.getElementById("input");
  document.getElementById("code").innerHTML = input.innerHTML;
</script>
</body>
</html>